<template>
  <div id="login">
    <!-- <video
      muted="muted"
      src="@/assets/video/boy.mp4"
      loop="loop"
      autoplay="autoplay"
      class="video"
    ></video> -->
    <div class="bg2"></div>
    <div class="container">
      <h1 v-text="nicename"></h1>
      <!-- 电脑角标部分 -->
      <i
        :class="['iconfont', 'jiaobiao', iconStyle]"
        @click="changeIcon(iconStyle)"
      ></i>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <!-- 常规登入 -->
        <!-- 向组件传参数 -->
        <Common
          ref="commonChild"
          @syncLoginForm="handleSyncLogunForm"
          @submit="subform"
          @changprom="changes"
          v-show="showLogin && !erwei && !smsContainer"
        ></Common>
        <!--二维码登入 erwei-->
        <Qrlogin
          v-show="!showLogin && erwei && !smsContainer"
          :StorageUserInfo="storageUserInfo"
        ></Qrlogin>
        <!-- 短信验证码登入 smsContainer-->
        <!-- v-show="!showLogin && !erwei && smsContainer" -->
        <SmsLogin
          v-show="!showLogin && !erwei && smsContainer"
          :StorageUserInfo="storageUserInfo"
        ></SmsLogin>
      </el-form>
    </div>
  </div>
</template>
<script>
import SmsLogin from "@/components/login/smsLogin.vue";
import Common from "@/components/login/commonLogin.vue";
import Qrlogin from "@/components/login/qrLogin.vue";
import * as api from "@/api/user";
import storage from "@/utils/storage";
/**
 *@编程小技巧
 *@全选严格匹配全部替换
 @注意给video添加一个 muter="muted" ['静音']
 */
// //校验用户名
var validateUsername = (rule, value, callback) => {
  //查看一下rule中的规则
  // console.log(rule)
  //用户名正则，3到16位（字母，数字，下划线，减号）
  var passwordPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (passwordPattern.test(value)) {
    //校验通过直接回调callback
    callback();
  } else {
    callback("3到16位字母数字下划线减号");
  }
};
//校验密码
var validatePassword = (rule, value, callback) => {
  var passwordPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (passwordPattern.test(value)) {
    //校验通过直接回调callback
    callback();
  } else {
    callback("密码格式3到16位字母数字");
  }
};
//校验验证码
var validateCaptcha = (rule, value, callback) => {
  //  if(value.length<3){
  //   callback("")
  //  }
  callback();
};

/**
 * @切换实现思路
 * v-if
 * v-else-if
 * v-else
 * 每个组件给到相应得字段声明
 */
export default {
  //定义组件
  components: {
    //常规登入引入
    Common,
    Qrlogin,
    SmsLogin,
  },
  mounted() {
    //获取env
    // console.log(process.env)
  },
  data() {
    return {
      loginForm: {
        username: "lbw",
        password: "555",
        captcha: "aaa",
      },
      //定义登入组件的布尔值
      showLogin: true,
      //定义二维码组件的布尔值
      erwei: false,
      //定义手机短信的布尔值
      smsContainer: false,
      // iconStyle:"icon-erweimajiaobiao",
      nicename: "帝国战争",
      rules: {
        //validator 验证 对应的是验证函数
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  computed: {
    iconStyle() {
      if (this.showLogin && !this.erwei && !this.smsContainer) {
        return "icon-erweimajiaobiao";
      } else if (!this.showLogin && this.erwei && !this.smsContainer) {
        return "icon-diannaojiaobiao erweimal";
      } else if (!this.showLogin && !this.erwei && this.smsContainer) {
        return "icon-diannaojiaobiao iphone";
      }
    },
  },
  methods: {
    //验证子组件的方法
    handleSyncLogunForm({ username, password, captcha }) {
      // console.log(newLoginForm);
      this.loginForm.username = username;
      this.loginForm.password = password;
      this.loginForm.captcha = captcha;
    },
    //触发父组件的小验证["登入"]
    subform() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //登入
          //获取后台的验证码
          //进行本地校验
          //本地校验通过
          //先校验验证码
          //在校验用户名和密码
          //请求验证码的方法
          //注意async的位置
          api.verifyCaptcha(this.loginForm.captcha).then(async (res) => {
            //如果输入有误我们需要重新刷新页面
            if (res.data.state) {
              //验证码通过校验用户名和密码
              let { username, password } = this.loginForm;
              let res = await api.loginApi(username, password);
              //登入成功
              if (res.data.state) {
                //存储用户信息到本地
                this.storageUserInfo(res.data);
                this.$message({
                  showClose: true,
                  message: "恭喜你,登入成功",
                  type: "success",
                });
                //跳转到主页
                this.$router.push("/home");
              }
            } else {
              //验证码不通过刷新验证码
              //获取子组件调用子组件中的方法
              let refs = this.$refs.commonChild;
              refs.getCapcha();
            }
          });
        } else {
          return false;
        }
      });
    },
    //用于存储用户的信息和token
    storageUserInfo(res) {
      // 获取token 和按钮权限 和用户信息
      let { token, userInfo, permission } = res;
      //设置本地储存
      //设置用户信息
      storage.set("userInfo", userInfo);
      //设置token
      storage.set("cg-token", token);
      //设置按钮权限
      storage.set("permission", permission);
    },
    //切换二维码和图标
    changeIcon(iconStyle) {
      if (iconStyle === "icon-erweimajiaobiao") {
        this.showLogin = false;
        this.erwei = true;
        this.nicename = "二维码登录";
      } else if (iconStyle === "icon-diannaojiaobiao erweimal") {
        this.showLogin = true;
        this.erwei = false;
        this.nicename = "帝国战争";
      } else if (iconStyle === "icon-diannaojiaobiao iphone") {
        this.showLogin = true;
        this.smsContainer = false;
        this.nicename = "帝国战争";
      }
    },
    //切换到短信页面
    changes() {
      this.nicename = "手机登入";
      this.showLogin = false;
      this.smsContainer = true;
    },
  },
};
</script>

<style lang="less" scoped>
/**
 * @修改elemntui的样式
 * @打开调试器找准类名
 * @覆盖样式
 * @看权重  !important
 * @使用深度选择器 >>> /deep/
 */
// .el-input {
//   /deep/.el-input__inner {
//     width: 300px !important;
//   }
// }

#login {
  text-align: center;
  color: #fff;
  .video {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }
  .bg2 {
    background-image: url("@/assets/img/logo.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 50%;
    height: 100%;
    background-size: 100% 100%;
    left: 0%;
    top: 10%;
  }
  .container {
    position: fixed;
    right: 10%;
    top: 14%;
    border-radius: 5px;
    background-color: rgba(38, 23, 19, 0.4);
    width: 400px;
    box-shadow: 0 0 13px #fff;
    padding: 70px 10px 50px 0;
    h1 {
      font-size: 50px;
      color: #a23600;
      font-family: "楷体";
    }
  }
  /deep/.btn_father {
    .el-form-item__content {
      margin-left: 100px !important;
    }
  }
  /deep/.btnClass {
    background-image: url("@/assets/img/btn.jpg");
    width: 300px;
    border: 0;
    color: #efd100;
    cursor: pointer;
    //添加hover样式
    &:hover {
      color: #fff;
    }
  }

  /deep/.el-form-item__label {
    color: #fff;
  }

  //  角标类名
  .jiaobiao {
    font-size: 60px;
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
